<template>
  <div class="tmpl">
    <!-- 1.轮播子组件 -->
    <div class="subimagesilder">
      <subimagesilder :imageList="imageList"></subimagesilder>
    </div>

    <!-- 2.购买信息 -->
    <div class="purchase">
      <h4>{{goodsInfo.name}}</h4>
      <p>
        市场价:￥
        <s>{{goodsInfo.market_price}}</s>&nbsp;&nbsp;
        销售价:￥
        <span>{{goodsInfo.sell_price}}</span>
      </p>
      <subnumber @goodsCount="getGoodsCount"></subnumber>
      <mt-button type="primary" size="small">立即购买</mt-button>
      <mt-button @click="addToShopCart" type="danger" size="small">加入购物车</mt-button>
    </div>

    <!-- 3.商品参数 -->
    <div class="goodsParams">
      <h5>商品参数</h5>
      <ul>
        <li>商品货号:{{goodsInfo._id}}</li>
        <li>库存情况:剩余{{goodsInfo.quantity}}件</li>
        <li>上架时间:{{goodsInfo.add_time | dateFmt('YYYY-MM-DD HH:mm:ss')}}</li>
      </ul>
    </div>

    <!-- 4.尾部 -->
    <div class="footer">
      <mt-button @click="goPictureAndText" plain size="large" type="primary">图文介绍</mt-button>

      <mt-button
        @click="goGoodsComment"
        class="goodsCommentStyle"
        plain
        size="large"
        type="danger"
      >商品评论</mt-button>
    </div>
  </div>
</template>

<style scoped>
.subimagesilder,
.purchase,
.goodsParams,
.footer {
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(92, 92, 92, 0.1);
}

.purchase h4 {
  color: #0094ff;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid rgba(92, 92, 92, 0.2);
  padding-bottom: 10px;
}

.purchase p {
  font-size: 14px;
  color: black;
}

.purchase span {
  font-size: 16px;
  color: red;
}

.goodsParams h5 {
  border-bottom: 1px solid rgba(92, 92, 92, 0.2);
  padding-bottom: 10px;
}

.goodsParams li {
  list-style: none;
  font-size: 16px;
}

.goodsParams ul {
  padding: 0;
}

.goodsCommentStyle {
  margin-top: 20px;
}
</style>

<script>
import common from "../../tools/common.js";

//1.导入子组件
import subimagesilder from "../subcomponent/subimagesilder.vue";
import subnumber from "../subcomponent/subnumber.vue";

//导入公共的vue对象
import { bus } from "../../tools/commonvue.js";

import { saveGoods } from "../../tools/shopcartHelper.js";

export default {
  data() {
    return {
      goodsInfo: {},
      imageList: [],
      goodsCount: 1
    };
  },
  created() {
    //1.0 获取商品Id对应的轮播图
    this.getGoodsLunboData();
    //2.0 获取商品信息
    this.getGoodsInfoData();
  },
  methods: {
    getGoodsLunboData() {
      //url
      const url =
        common.apihost + "api/v1/products/" + this.$route.params.goodsId;
      //send request
      this.$http.get(url).then(
        res => {
          //console.log(res.body.message);
          /*res.body.message.forEach(item=>{
                        item.img = item.src;
                    })*/
          this.imageList.push(res.body);
        },
        err => {
          console.log(err);
        }
      );
    },
    //获取商品详情信息
    getGoodsInfoData() {
      //url
      const url =
        common.apihost + "api/goods/getinfo" + this.$route.params.goodsId;
      console.log(url);
      //send request
      this.$http.get(url).then(
        res => {
          //   console.log(res.data);
          this.goodsInfo = res.body;
        },
        err => {}
      );
    },
    //去图文详情组件
    goPictureAndText() {
      //  => /goods/desc?goodsId=87
      this.$router.push({
        path: "/goods/desc",
        query: { goodsId: this.$route.params.goodsId }
      });
    },
    //去商品评论组件
    goGoodsComment() {
      // => /goods/comment/87
      this.$router.push({
        name: "goodscomment",
        params: { goodsId: this.$route.params.goodsId }
      });
    },
    getGoodsCount(count) {
      //记录子组件中传递过来的值
      this.goodsCount = count;
    },
    //加入购物车
    addToShopCart() {
      //1.0 将sunumber子组件传递过来的值，传给App.vue
      //shopCount虽说是随意取，但是要确保唯一
      bus.$emit("shopCount", this.goodsCount);

      //2.0 将商品的id及数量存在localstorage中方便购物车模块使用
      const goodsObj = {
        goodsId: this.$route.params.goodsId,
        count: this.goodsCount
      };

      saveGoods(goodsObj);
    }
  },
  components: {
    subimagesilder: subimagesilder, //2.0 注册
    subnumber
  }
};
</script>